import { useShallow } from "zustand/shallow";
import usePriseStore from "../store/price";
import useUserStore from "../store/user";

export default function Zustand() {
  // const price = usePriseStore((state) => state.price);
  // const increment = usePriseStore((state) => state.increment);
  // const decrement = usePriseStore((state) => state.decrement);
  // const reset = usePriseStore((state) => state.reset);
  // const getPrice = usePriseStore((state) => state.getPrice);

  const {price, increment, decrement, reset, getPrice} = usePriseStore(useShallow(state => ({
    price: state.price,
    increment: state.increment,
    decrement: state.decrement,
    reset: state.reset,
    getPrice: state.getPrice,
  })))

  const updateGourd = useUserStore((state) => state.updateGourd);
  const { gourd } = useUserStore()

  return (
    <div>
      <h1>Zustand</h1>
      <h1>Price: {price}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
      <button onClick={getPrice}>Get Price</button>

      <div>葫芦娃: {gourd.oneChild}</div>
      <div>葫芦娃: {gourd.twoChild}</div>
      <div>葫芦娃: {gourd.threeChild}</div>
      <div>葫芦娃: {gourd.fourChild}</div>
      <div>葫芦娃: {gourd.fiveChild}</div>
      <div>葫芦娃: {gourd.sixChild}</div>
      <div>葫芦娃: {gourd.sevenChild}</div>
      <button onClick={updateGourd}>Update Gourd</button>
      {/* 清空本地存储 */}
      <button onClick={() => useUserStore.persist.clearStorage()}>清除本地存储</button>
    </div>
  );
}